<script setup lang="ts">
import LoginBox from './layout/index.vue'
import { Lock, User, Message } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { studentForgetPassword } from '@/api/student/type';

import type { adminForgetPassword } from '@/api/admin/type';
//引入管理员相关的小仓库
import useAdminStore from '@/store/modules/admin'; // 命名导入
let adminStore = useAdminStore();


//引入学生相关的小仓库
import useStudentStore from '@/store/modules/student';
let studentStore = useStudentStore();




//引入公共管理的小仓库
import useCommonStore from '@/store/modules/common'; // 命名导入
let commonStore = useCommonStore();







let forgetForm = reactive({ username: '', password: '', email: '', validate: '' });
let usertype = ref('student');
let loading = ref(false);
let loadingEmail = ref(false);
const $router = useRouter();
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' },],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  validate: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}


// 定义学生找回密码的处理函数
const handleStudentForgetPassword = async (data: studentForgetPassword) => {
  try {
    // 使用 await 等待异步操作完成
    const result = await studentStore.studentForgetPassword(data);

    if (result === 'ok') {
      // 找回密码成功后的逻辑
      ElMessage.success('找回密码成功！');

      // 导航到登录页面
      $router.push('/login').then(() => {
        // 刷新页面
        window.location.reload();
      });
    }
  } catch (error) {
    // 处理错误
    ElMessage.error('找回密码失败，请核对后重试');
  }
};

const handleAdminForgetPassword = async (data: adminForgetPassword) => {
  try {
    // 使用 await 等待异步操作完成
    const result = await adminStore.adminForgetPassword(data);

    if (result === 'ok') {
      // 找回密码成功后的逻辑
      ElMessage.success('找回密码成功！');

      // 导航到登录页面
      $router.push('/login').then(() => {
        // 刷新页面
        window.location.reload();
      });
    }
  } catch (error) {
    // 处理错误
    ElMessage.error('找回密码失败，请核对后重试');
  }
};

const forgetPassword = () => {
  if (usertype.value === 'student') {
    let studentForgetPassword = reactive({ studentUsername: '', studentPassword: '', studentEmail: '', verificationCode: '' });

    studentForgetPassword.studentUsername = forgetForm.username;
    studentForgetPassword.studentPassword = forgetForm.password;

    studentForgetPassword.studentEmail = forgetForm.email;

    studentForgetPassword.verificationCode = forgetForm.validate;

    handleStudentForgetPassword(studentForgetPassword);

  } else if (usertype.value === 'admin') {
    let adminForgetPassword = reactive({ adminUsername: '', adminPassword: '', adminEmail: '', verificationCode: '' });

    adminForgetPassword.adminUsername = forgetForm.username;
    adminForgetPassword.adminPassword = forgetForm.password;

    adminForgetPassword.adminEmail = forgetForm.email;

    adminForgetPassword.verificationCode = forgetForm.validate;

    handleAdminForgetPassword(adminForgetPassword);



  } else {
    alert('未知用户类型，请选择正确的用户类型');
  }
}
const goBack = () => {
  $router.push('/login');
}


/**
 * 实现发送验证码的功能
 */
let buttonText = ref('发送验证码');
const sendMessage = () => {
  //forgetForm.value.email
  //发送邮件

  loadingEmail.value = true;
  commonStore.sendVerificationCode(forgetForm.email);
  loadingEmail.value = false;
  buttonText.value = '重新发送';
}
</script>


<template>
  <login-box>
    <template #login_form>
      <div class="forget_header">
        <h2>找回密码</h2>
        <p>Password Recovery</p>
      </div>
      
      <el-form class="forget_form" :model="forgetForm" :rules="rules" ref="loginForms">
        <el-form-item prop="username">
          <el-input :prefix-icon="User" v-model="forgetForm.username" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item prop="email">
          <el-input type="email" :prefix-icon="Message" v-model="forgetForm.email" placeholder="邮箱"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" :prefix-icon="Lock" v-model="forgetForm.password" show-password placeholder="新密码"></el-input>
        </el-form-item>

        <el-form-item prop="validate" class="validate-group">
          <el-input v-model="forgetForm.validate" placeholder="验证码"></el-input>
          <el-button v-debounce:500="sendMessage" :loading="loadingEmail" class="send-btn" type="warning">{{ buttonText }}</el-button>
        </el-form-item>

        <el-form-item prop="usertype" class="usertype">
          <el-radio-group v-model="usertype">
            <el-radio value="student" size="large">学生</el-radio>
            <el-radio value="admin" size="large">任课老师</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <div class="btn-group">
          <el-button v-debounce:500="forgetPassword" :loading="loading" class="confirm_btn" type="success" size="large">确定修改</el-button>
          <el-button v-debounce:500="goBack" class="back_btn" type="primary" size="large">返回登录</el-button>
        </div>
      </el-form>
    </template>
  </login-box>
</template>

<style scoped lang="scss">
.forget_header {
  text-align: center;
  margin-bottom: 30px;
  
  h2 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 5px;
    font-weight: 600;
  }
  
  p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
  }
}

.forget_form {
  position: relative;
  width: 100%;
  
  :deep(.el-form-item__label) {
    color: rgba(255, 255, 255, 0.9);
  }
  
  :deep(.el-input) {
    .el-input__wrapper {
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
      border-radius: 4px;
    }
    
    input {
      color: #333;
      height: 45px;
      
      &::placeholder {
        color: #666;
      }
    }
    
    .el-input__prefix-inner {
      color: #666;
    }
  }
  
  .validate-group {
    display: flex;
    gap: 10px;
    
    :deep(.el-input) {
      flex: 1;
    }
    
    .send-btn {
      background: #ff9900;
      color: #fff;
      border: none;
      padding: 0 15px;
      white-space: nowrap;
      font-weight: bold;
      
      &:hover {
        background: #ffaa33;
      }
    }
  }

  .usertype {
    margin-bottom: 20px;
    
    :deep(.el-radio__label) {
      color: #fff;
      font-weight: bold;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
  }
  
  .btn-group {
    display: flex;
    gap: 15px;
    margin-top: 30px;
  }

  .confirm_btn, .back_btn {
    flex: 1;
    height: 45px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 1px;
  }
  
  .confirm_btn {
    background: #2e8df5;
    border: none;
    
    &:hover {
      background: #4099ff;
    }
  }
  
  .back_btn {
    background: #2c62e6;
    color: #fff;
    border: none;
    font-weight: bold;
    
    &:hover {
      background: #4070ee;
    }
  }
}
</style>